/**
 * @since : 2018/3/26 上午9:55
 * @author : fupeng
 */

import React from 'react';
import {Link} from 'react-router-dom';
import Mutil from "util/mm.jsx";

class NavTop extends React.Component {

    constructor() {
        super();
        this.state = {
            username: Mutil.sgetLocalStorage('userInfo').username || ''
        }
    }

    onLayout() {
        Mutil.removeLocalStorage('userInfo');
        window.location.href = '/login';
    }

    render() {
        return (
            <nav className="navbar navbar-default top-navbar" role="navigation">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle" data-toggle="collapse"
                            data-target=".sidebar-collapse">
                        <span className="sr-only">Toggle navigation</span>
                    </button>
                    <Link className="navbar-brand" to="/"><b>In</b>sight</Link>
                </div>

                <ul className="nav navbar-top-links navbar-right">
                    <li className="dropdown">
                        <a className="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                            <i className="fa fa-user fa-fw"></i>欢迎，{this.state.username} <i className="fa fa-caret-down"></i>
                        </a>
                        <ul className="dropdown-menu dropdown-user">
                            <li>
                                <a onClick={(e)=>{this.onLayout(e)}}>
                                    <i className="fa fa-sign-out fa-fw"></i>
                                    &nbsp;Logout
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        );
    }
}

export default NavTop;
